<template>
  <div
    class="clearStore"
    v-show="
      storeType == '0' ||
        storeType == '3' ||
        storeType == '4' ||
        storeType == '2' ||
        storeType == '1'
    "
    :class="{ allKai: storeType == '2' || storeType == '1' }"
  >
    <div
      class="header"
      v-show="storeType == '0' || storeType == '3' || storeType == '4'"
    >
      <p class="title">当前橱窗状态</p>
      <p class="content" v-show="storeType == '0'">暂未开通</p>
      <p class="content" v-show="storeType == '4'">已禁用</p>
      <div class="alertDrs">
        <p class="p1" v-show="storeType == '4'">您的橱窗功能已禁用</p>
        <p class="p1" v-show="storeType == '0'">
          {{message}}
        </p>
        <p class="p2" v-show="storeType == '4'">
          <span>{{message}}</span>
        </p>
      </div>
    </div>
    <div class="header header1" v-show="storeType == '2' || storeType == '1'">
      <p class="title">当前橱窗状态</p>
      <p class="content" v-show="storeType == '1'">审核中</p>
      <p class="content" v-show="storeType == '2'">已开通</p>
      <div class="alertDrs">
        <p class="p1" v-show="storeType == '1'">
          {{message}}
        </p>
        <p class="p1" v-show="storeType == '2'">
          {{message}}
        </p>
      </div>
    </div>

    <div class="imgContent">
      <div class="imgTitle">
        <img src="@assets/images/getBg.png" alt="" />
      </div>
      <div class="imgList">
        <div class="oneImg">
          <div class="left">
            <img src="@assets/images/icon1.png" alt="" srcset="" />
          </div>
          <div class="right">
            <p class="p1">橱窗功能</p>
            <p class="p2">拥有个人主页橱窗功能</p>
          </div>
        </div>
        <div class="oneImg">
          <div class="left">
            <img src="@assets/images/icon2.png" alt="" srcset="" />
          </div>
          <div class="right">
            <p class="p1">直播间带货</p>
            <p class="p2">支持在直播间添加商品</p>
          </div>
        </div>
        <div class="oneImg">
          <div class="left">
            <img src="@assets/images/icon3.png" alt="" srcset="" />
          </div>
          <div class="right">
            <p class="p1">管理商品</p>
            <p class="p2">支持在商品橱窗管理商品</p>
          </div>
        </div>
      </div>
    </div>
    <div class="choice">
      <img
        v-show="choiceread || storeType == '2' || storeType == '1'"
        @click="changeType"
        src="@assets/images/storeChoice.png"
        alt=""
      />
      <img
        v-show="choiceread == false && storeType != '2' && storeType != '1'"
        @click="changeType"
        src="@assets/images/storeNochice.png"
        alt=""
      />
      <div class="xieyi">
        我已阅读<span @click="toXie">《主持人服务与分成协议》</span>
      </div>
      <div class="alertDiv" v-show="choiceXieyi">请勾选用户协议</div>
    </div>
    <div
      class="btn"
      @click="storeApply"
      :class="{
        active: choiceread == true && storeType != '2' && storeType != '1'
      }"
    >
      立即申请
    </div>
  </div>
</template>
<script>
// import { mapGetters } from "vuex";
// import { VUE_APP_API_URL } from "@utils";
// // import VueCoreImageUpload from "vue-core-image-upload";
import { storeCheck, storeApply } from "@api/clearStore";
// import { clearAuthStatus } from "@libs/wechat";
// import cookie from "@utils/store/cookie";
// import store from "@/store";
// import dayjs from "dayjs";

export default {
  name: "clearStore",
  components: {},
  data: function() {
    return {
      number: "",
      choiceread: false,
      storeType: "",
      message:"",
      choiceXieyi:false,
    };
  },
  watch: {},
  mounted: function() {
    this.number = this.$route.query.number;
    this.storeCheck();
  },
  methods: {
    changeType: function() {
      if(this.storeType == '0' || this.storeType == '4'){
        if (this.choiceread) {
          this.choiceread = false;
        } else {
          this.choiceread = true;
          this.choiceXieyi = false;
        }
      }else{

      }
      
    },
    // storeCheck
    storeCheck: function() {
      storeCheck({ number: this.number })
        .then(res => {
          this.storeType = res.data.status;
          this.message = res.data.message
        })
        .catch(err => {
          this.$dialog.error(err.msg);
        });
    },
    storeApply: function() {
      var that = this;
      if (this.choiceread) {
        storeApply({ number: this.number })
          .then(res => {
            if(res.data.status == '1'){
              that.$dialog.toast({ mes: "申请成功" });
              setTimeout(()=>{
                window.location.href='';
              },2000)
            }else{
              that.$dialog.toast({ mes: res.data.message });
            }
            
          })
          .catch(err => {
            this.$dialog.error(err.msg);
          });
      } else {
        if(this.storeType == '0' || this.storeType == '4'){
          this.choiceXieyi = true;
          return false;
        }else{
          return false;
        }
        
      }
    },
    toXie: function() {
      this.$router.push({ path: "showcaseAgreement" });
    }
  },
  filters: {}
};
</script>
<style scoped>
.clearStore {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 100%;
  background: rgba(243, 246, 255, 1);
}
.allKai {
  background: rgba(250, 243, 227, 1);
}
.clearStore .header {
  background-image: url("../../assets/images/settopBg3.png");
  width: 100%;
  height: 3.18rem;
  color: #fff;
  overflow: hidden;
  background-size: 100%;
  margin-bottom: 0.3rem;
}
.clearStore .header1 {
  color: rgba(163, 117, 33, 1);
  background-image: url("../../assets/images/settopBg2.png");
}
.clearStore .header .title {
  margin: 0.6rem 0 0 0.52rem;
  width: 100%;
  height: auto;
  line-height: 1;
  font-size: 0.24rem;
  padding: 0.05rem 0;
}
.clearStore .header .content {
  margin-top: 0.06rem;
  text-align: center;
  height: auto;
  line-height: 1;
  font-size: 0.36rem;
  padding: 0.07rem 0;
  font-weight: 500;
}
.clearStore .header .alertDrs {
  text-align: center;
  padding-top: 0.22rem;
  display: flex;
  justify-content: center;
  flex-direction:column;
}
.clearStore .header .alertDrs .p1 {
  font-size: 0.24rem;
  line-height: 1;
  padding: 0.05rem 0;
}
.clearStore .header .alertDrs .p2 {
  margin: 0 auto;
  font-size: 0.24rem;
  line-height: 1;
  padding: 0.05rem 0.2rem;
  margin-top: 0.1rem;
  max-width: 5.42rem;
  border-radius: 0.34rem;
  background: rgba(0, 0, 0, 0.1);
  width: auto;

}
.clearStore .imgContent {
  width: 100%;
  height: auto;
  border-radius: 0.16rem;
  width: 7rem;
  margin-left: 0.25rem;
  overflow: hidden;
  box-shadow: 0px 0.04rem 0.16rem 0px rgba(0, 0, 0, 0.1);
}
.clearStore .imgContent .imgTitle {
  width: 7rem;
  height: 0.92rem;
}
.clearStore .imgContent .imgTitle img {
  width: 100%;
}
.clearStore .imgContent .imgList {
  width: 7rem;
  height: auto;
  padding-top: 0.2rem 0 0.32rem 0;
  background: rgba(255, 255, 255, 1);
}
.clearStore .imgContent .imgList .oneImg {
  width: 100%;
  height: 1.6rem;
  display: flex;
  justify-content: start;
  align-items: center;
}
.clearStore .imgContent .imgList .oneImg .left {
  margin-left: 0.32rem;
  margin-right: 0.3rem;
}
.clearStore .imgContent .imgList .oneImg .left img {
  width: 1.12rem;
}
.clearStore .imgContent .imgList .oneImg .right {
  flex: 1;
}
.clearStore .imgContent .imgList .oneImg .right p1 {
  font-size: 0.28rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  padding: 0.06rem 0;
  line-height: 1;
  margin-bottom: 0.04rem;
}
.clearStore .imgContent .imgList .oneImg .right p2 {
  font-size: 0.24rem;
  font-weight: 400;
  color: rgba(117, 121, 145, 1);
  padding: 0.05rem 0;
  line-height: 1;
}
.clearStore .choice {
  width: 100%;
  display: flex;
  padding-top: 0.48rem;
  justify-content: start;
  align-items: center;
  height: 0.32rem;
}
.clearStore .choice img {
  height: 0.32rem;
  margin-left: 0.56rem;
}
.clearStore .choice .xieyi {
  font-size: 0.24rem;
  padding-left: 0.02rem;
  color: rgba(0, 0, 0, 1);
}
.clearStore .choice .xieyi span {
  color: rgba(68, 115, 225, 1);
}
.clearStore .choice .alertDiv {
  flex: 1;
  text-align: right;
  color: rgba(252, 64, 74, 1);
  padding-right: 0.56rem;
  font-size: 0.24rem;
}
.btn {
  background-image: url("../../assets/images/cantClick.png");
  width: 6.86rem;
  height: auto;
  color: rgba(255, 255, 255, 1);
  overflow: hidden;
  background-size: 100%;
  position: absolute;
  bottom: 0.4rem;
  left: 0.32rem;
  font-size: 0.28rem;
  text-align: center;
  line-height: 1;
  padding: 0.3rem 0;
}
.active {
  background-image: url("../../assets/images/canClick.png");
}
</style>
